<template>
  <el-menu :default-openeds="[]" background-color="#545c64" text-color="#ffffff" :collapse="isCollapse">
    <div class="mb-2">系统</div>
    <el-sub-menu
      v-for="(item, index) in routerList"
      :key="index"
      :index="item.id" >
        <template v-slot:title>
          <el-icon>
            <component :is="item.icon" />
          </el-icon>
          <span>{{ item.name }}</span>
        </template>
        <el-menu-item-group
          v-for="(iTs,indexs) in item.children"
          :key="`${index}+${indexs}`"
          :index="iTs.id"
          @click="toRoute(iTs.path)"
        >
          <span class="iTsSpan">{{ iTs.meta.title }}</span>
        </el-menu-item-group>
    </el-sub-menu>
  </el-menu>
</template>

<script setup>
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'

import { toRefs, defineProps } from 'vue'

// 路由API
const router = useRouter()

// 获取路由
const store = useStore()
const routerList = store.state.router
// 控制侧边栏的开关
const props = defineProps({
  isCollapse: Boolean
})
const { isCollapse } = toRefs(props)

// 点击跳转路由 Fun
const toRoute = (path) => {
  console.log(path)

  router.push({
    path
  })
}
</script>
<style lang="scss" scoped>
.mb-2 {
  height: 50px;
  line-height: 50px;
  font-size: 20px;
  text-align: center;
  color: #fff;
  font-weight: 700;
}
.iTsSpan {
  display: block;
  width: 100%;
  text-align: center;
  color: #fff;
  font-size: 12px;
  font-weight: 400;
}
</style>
